<template>
<div id="app" class="atlas-page">
    <scroll-fixed>
        <page-bar>
            <a href="javascript:history.back();" slot="left">
                <i class="uicon uicon-back-w"></i>
            </a>
            <a href="javascript:;" @click="moreConfig.status = true" slot="right">
                <i class="uicon uicon-bar-more-w"></i>
            </a>
        </page-bar>
    </scroll-fixed>
    <div class="atlas-wrap" @click.stop.prevent="back">
        <ul class="swiper-wrapper">
            <li class="swiper-slide" v-for="(item ,index) in atlas">
                <div class="atlas-con">
                    <div class="cover-img">
                        <img :src="item.img" alt="">
                    </div>
                    <article class="article-item">
                        <div class="article-title">
                            {{item.title}}
                        </div>
                        <div class="article-con">
                            <span class="item-num">
                                <span class="num">{{index+1}}/</span>
                                <span class="sum">{{atlas.length}}</span>
                            </span>
                            {{item.desc}}
                        </div>
                    </article>
                </div>
            </li>
        </ul>
    </div>
    <div id="title" style="display:none">{{info.title}}</div>
    <div id="cont" style="display:none">
        <div v-for="(item ,index) in atlas">
            <img :src="item.img" />
            <span>{{item.desc}}</span>
        </div>
    </div>
    <!-- <div class="atlas-contr">
        <div class="contr-con">
            <div class="contr-left">
                <i class="contr-eidt"></i>
                <span>写评论...</span>
            </div>
            <div class="contr-middle">
                <div class="middle-con"></div>
            </div>
            <div class="contr-right">
                <i class="contr-num"></i>
                <span class="msg-num">{{atlas.msgSum}}</span>
                <a href="javascript:;" class="contr-send" @click="send(atlas.id)"></a>
            </div>
        </div>
    </div> -->

    <popup-more :status="moreConfig.status" :config="moreConfig"  @report="report_status = true,moreConfig.status=false" @unlike="unlikeHandle" @close="moreConfig.status = false" @fav="changeFav" @night="changeNight"></popup-more>
    <transition name="page-slide-left">
        <ui-report v-if="report_status" :id="info.id" :type="info.type" :title="info.title" @cancel="reportCancel" @done="reportDone"/>
    </transition>
</div>
</template>

<script>
    import scrollFixed from "../components/scrollFixed.vue";
    import pageBar from "../components/pagebar.vue";
    import UILoading from '../components/loading.vue'
    import MoreBox from '../components/morebox.vue'
    import Swiper from 'swiper';

    import mxReport from '../mixins/report.js'

    export default {
        name: "atlas",
        components: {
            [scrollFixed.name]: scrollFixed,
            [pageBar.name]: pageBar,
            [MoreBox.name]: MoreBox,
            [UILoading.name]: UILoading,
        },
        mixins:[mxReport],
        data() {
            return {
                info: {},
                preview: {
                    status: false,
                    delete: false,
                    active: 0,
                    list: []
                },
                swiper:'',
                onIndex:0,
                atlas: [],
                id: '',
                moreConfig:{
                    id:'',
                    status:false,
                    fav:false,
                    night:false,
                    item:''
                },
            };
        },
        mounted() {
            let parse = this.$utils.urlFactory.parse(location.search);
            if(parse && parse.id){
                this.id = parse.id;
                this.$emit('pageRefresh');
            }else{
                this.$toast('参数有误').then(()=>{
                    history.back();
                })
            }
            this.loadPage();
        },
        methods: {
            back () {
                let urlParams = this.$utils.urlFactory.parse(location.search);
                if(urlParams.action == undefined){
                    history.back();
                }
            },
            loadPage(){
                let urlParams = this.$utils.urlFactory.parse(location.search);
                let params = {
                    id:this.id
                }
                if(urlParams.action && urlParams.action == 'preview'){
                    params.action = 'preview'
                }
                this.$http.get('?ct=news&ac=detail',{params}).then(response=>{
                    let {data} = response;
                    if(data.code == 0){
                        let rs = data.data;
                        this.info = rs.info;
                        this.atlas = rs.info.atlas
                        //是否已经收藏
                        this.moreConfig.fav = !!rs.info.is_collect;
                        this.moreConfig.id = rs.info.id;
                        
                        this.$nextTick(()=>{
                            this.swiper = new Swiper('.atlas-wrap', {
                                initialSlide:this.onIndex
                            });
                        });
                    }else{
                        let co = this.$toast(data.msg);
                        if(data.code == 5003 || data.code == 5004){
                            co.then(()=>{
                                history.back();
                            })
                        }
                        throw new Error(data.msg);
                    }
                }).catch(e=>{
                    this.$toast(e);
                    throw e;
                })
            },
            changeFav(flag){
                this.moreConfig.fav = flag;
                this.moreConfig.status = false;
            },
            changeNight(flag){
                this.moreConfig.night = !this.moreConfig.night;
                this.moreConfig.status = false;
            },
            unlikeHandle(){
                history.back();
            },
        }
    };
</script>

<style lang="less">
    .atlas-page {
        .page-bar {
            background-color:transparent;
        }
        .atlas-wrap {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            background: #282423;
            overflow: hidden;

            .swiper-container {
                width: 100%;
                height: 100%;
                margin: 0 auto;
                position: relative;
                overflow: hidden;
                list-style: none;
                padding: 0;
                z-index: 1;
            }
            .swiper-wrapper {
                position: absolute;
                left: 0;
                bottom: 104px;
                width: 100%;
                height: 775px;
                z-index: 1;
                display: flex;
                transition-property: transform;
                box-sizing: content-box
            }
            .swiper-slide {
                overflow: hidden;
                flex-shrink: 0;
                width: 100%;
                height: 100%;
                position: relative;
                transition-property: transform;
            }
        }

        .atlas-con {
            position: relative;
            z-index: 2;
            font-size: 32px;
            line-height: 47px;
            color: #fff;
            .cover-img {
                margin-bottom: 42px;

                img {
                    width: 100%;
                    max-height: 422px;
                }
            }
            .article-title {
                font-weight: bold;
            }
            .item-num {
                color: #919191;
                .num {
                    font-size: 40px;
                }
            }
            .article-item {
                height: 300px;
                overflow: scroll;
                padding: 0 24px;
            }
        }
        .atlas-contr {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 999;

            .contr-con {
                display: flex;
                padding: 0 40px;
                height: 104px;
                box-sizing: border-box;
                background: #282423;
                border-top: 1px solid #4a4645;
                color: #fff;
            }

            .contr-middle {
                flex: 1;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
            }
            .contr-left,
            .contr-right {
                min-width: 82px;
                height: 100%;
                flex-shrink: 0;
                flex-grow: 0;

                &,
                &>span,
                &>a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .contr-eidt {
                    margin-right: 16px;
                    width: 34px;
                    height: 32px;
                    background: url(../assets/atlas-edit.png) center center / cover;
                }

                .contr-num {
                    margin-right: 12px;
                    width: 34px;
                    height: 36px;
                    background: url(../assets/atlas-msg.png) center center /cover;
                }
                .msg-num {
                    justify-content: left;
                    margin-right: 12px;
                    width: 90px;
                }

                .contr-send {
                    width: 32px;
                    height: 35px;
                    background: url(../assets/atlas-send.png) center center /cover;
                }
            }
        }
    }
</style>